<template>
  <Modal
    v-model:active="ColorModalValueActive"
    transfer
    title="设置颜色"
    :width="300"
    :height="500"
    confirm-text="确定"
    @confirm="executeMeshCreate"
  >
    <NativeScroll use-y-bar height="100%" scroll-style="padding: 5px;">
      <Row :gap="[8]">
        <Form>
          <Column :span="24">
            <div class="title">
              <div class="title_color"></div>
              <div class="title_content">选择颜色</div>
            </div>
          </Column>
          <div style="margin-left: 100px">
            <Column :span="24">
              <ColorPicker v-model:value="color"></ColorPicker>
            </Column>
          </div>
        </Form>
      </Row>
    </NativeScroll>
  </Modal>
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps } from "vue";
import type { Color } from "cax-ui";
import { Modal, Form, ColorPicker, NativeScroll, Row, Column } from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore } from "@/UI/store";
const coreStore = useCoreStore();

let { ColorModalValueActive } = storeToRefs(coreStore);
const props = defineProps({
  colorIn: {
    type: String,
    default: () => {
      return "rgba(51, 154, 240)";
    },
  },
});
const color = ref<Color>(props.colorIn);
const emits = defineEmits(["emitColor"]);

function executeMeshCreate() {
  // 将颜色值返回给父元素。
  emits("emitColor", color.value);
}
</script>

<style scoped lang="less">
:deep(.vxp-form) {
  display: flex;
  align-items: center;
}
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
</style>
